<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div>
      <h3>
        部分不可用
      </h3>
      <div
        class="ant-pro-checkcard ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-avatar"
          >
            <span
              class="ant-avatar ant-avatar-square ant-avatar-image"
              style="width: 48px; height: 48px; font-size: 18px;"
            >
              <img
                src="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
              />
            </span>
          </div>
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card title
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              This is the description
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-checkcard ant-pro-checkcard-disabled ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-avatar"
          >
            <span
              class="ant-avatar ant-avatar-square ant-avatar-image"
              style="width: 48px; height: 48px; font-size: 18px;"
            >
              <img
                src="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
              />
            </span>
          </div>
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card title
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              This is the description
            </div>
          </div>
        </div>
      </div>
      <div
        class="ant-pro-checkcard ant-pro-checkcard-checked ant-pro-checkcard-disabled ant-pro-checkcard-bordered"
      >
        <div
          class="ant-pro-checkcard-content"
        >
          <div
            class="ant-pro-checkcard-avatar"
          >
            <span
              class="ant-avatar ant-avatar-square ant-avatar-image"
              style="width: 48px; height: 48px; font-size: 18px;"
            >
              <img
                src="https://gw.alipayobjects.com/zos/bmw-prod/f601048d-61c2-44d0-bf57-ca1afe7fd92e.svg"
              />
            </span>
          </div>
          <div
            class="ant-pro-checkcard-detail"
          >
            <div
              class="ant-pro-checkcard-header"
            >
              <div
                class="ant-pro-checkcard-header-left"
              >
                <div
                  class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                >
                  Card title
                </div>
              </div>
            </div>
            <div
              class="ant-pro-checkcard-description"
            >
              This is the description
            </div>
          </div>
        </div>
      </div>
    </div>
    <div>
      <h3>
        整体不可用
      </h3>
      <div
        class="ant-pro-checkcard-group"
      >
        <div
          class="ant-pro-checkcard ant-pro-checkcard-checked ant-pro-checkcard-disabled ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    Card A
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                选项一
              </div>
            </div>
          </div>
        </div>
        <div
          class="ant-pro-checkcard ant-pro-checkcard-disabled ant-pro-checkcard-bordered"
        >
          <div
            class="ant-pro-checkcard-content"
          >
            <div
              class="ant-pro-checkcard-detail"
            >
              <div
                class="ant-pro-checkcard-header"
              >
                <div
                  class="ant-pro-checkcard-header-left"
                >
                  <div
                    class="ant-pro-checkcard-title ant-pro-checkcard-title-with-ellipsis"
                  >
                    Card B
                  </div>
                </div>
              </div>
              <div
                class="ant-pro-checkcard-description"
              >
                选项二
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="margin-top: 20px; padding: 20px; background-color: #f5f5f5; border-radius: 6px;"
    >
      <h4>
        CheckCard Disabled Props 说明：
      </h4>
      <ul>
        <li>
          <strong>
            disabled
          </strong>
          : 是否禁用卡片，禁用后无法点击和选择
        </li>
        <li>
          <strong>
            defaultChecked
          </strong>
          : 默认选中状态，即使禁用也可以设置默认选中
        </li>
        <li>
          <strong>
            title
          </strong>
          : 卡片标题
        </li>
        <li>
          <strong>
            description
          </strong>
          : 卡片描述信息
        </li>
        <li>
          <strong>
            avatar
          </strong>
          : 卡片头像
        </li>
      </ul>
      <h4>
        CheckCard.Group Disabled Props：
      </h4>
      <ul>
        <li>
          <strong>
            disabled
          </strong>
          : 禁用整个组，所有子卡片都会被禁用
        </li>
        <li>
          <strong>
            defaultValue
          </strong>
          : 默认选中的值
        </li>
      </ul>
      <h4>
        禁用状态说明：
      </h4>
      <ul>
        <li>
          <strong>
            单个禁用
          </strong>
          : 在 CheckCard 上设置 disabled 属性
        </li>
        <li>
          <strong>
            组级禁用
          </strong>
          : 在 CheckCard.Group 上设置 disabled 属性
        </li>
        <li>
          <strong>
            默认选中
          </strong>
          : 禁用的卡片仍然可以设置 defaultChecked
        </li>
      </ul>
    </div>
  </div>
</DocumentFragment>